import React, { Component } from 'react'
import { connect } from 'dva';
import { Table, Modal, message, Button } from 'antd';
import PersonList from './PersonList';
import styled from '../task.less';

export interface Props {
  dispatch?: Function,
  isOkNext?: Function,
  goBack?: Function,
  children?: React.ReactNode,
  loading?: boolean,
  deviceList?: {
    data: Array<any>,
    dataCnt: number
  },
  buttons?: Array<any>,
  dict?: object,
  isShow?: any,
}

@connect(({ task_rules }) => ({
  personList: task_rules.personList || {}
}))
class FormList03 extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.state = {
      ans: [],
      allData: [],
      visible: false,
      isSearchReset: false,
      isShow: props.isShow,
      deviceList: [],
      userIdList: [],
      selectedRowKeys: [],
      deviceSelectedData: [],
      endSelectedData: []
    };
    this.initCurrent = this.initCurrent.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      isShow: nextProps.isShow
    })
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  onSelectChange = (selectedRowKeys, rowData) => {
    this.setState({
      selectedRowKeys,
      userIdList: []
    }, () => {
      rowData.forEach(item => {
        this.state.userIdList.push(item.key);
      });
    });
  };

  showModal = () => {
    this.setState({
      visible: true,
      isSearchReset: !this.state.isSearchReset
    });
  };

  handleOk = () => {
    this.setState({
      visible: false,
      ans: [...this.state.endSelectedData, ...this.state.allData]
    });
  };

  handleCancel = () => {
    this.setState({
      visible: false,
      deviceSelectedData: this.state.ans
    });
  };

  selectedDevice = (rowData, selectedObj, indexList, isChangePageNum) => {
    let selectedData = [];
    let allData = [];
    if(isChangePageNum) {
      indexList.forEach(item => {
        selectedData = [...selectedData, ...selectedObj['pageNum'+item]];
      })
    }
    allData = JSON.parse(JSON.stringify([...selectedData, ...rowData]));
    this.setState({
      allData
    })
  };

  isSearchData = () => {
    let endSelectedData = [...this.state.endSelectedData, ...this.state.ans];
    this.setState({
      endSelectedData
    })
  };

  // 删除列表中数据
  delDeviceData = () => {
    if(this.state.userIdList.length === 0) {
      message.warning('请选择后操作');
      return;
    }
    let len = this.state.userIdList.length;
    let endSelectedData = this.state.endSelectedData;
    let allData = this.state.allData;
    for(let i = 0; i < len; i ++) {
      endSelectedData = endSelectedData.filter(item => item.key !== this.state.userIdList[i]);
      allData = allData.filter(item => item.key !== this.state.userIdList[i]);
    }
    let ans = [...endSelectedData, ...allData];
    this.setState({
      ans,
      endSelectedData,
      allData,
      deviceSelectedData: ans
    })
  };

  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys ,
      'type': 'checkbox',
      onChange: this.onSelectChange,
    };
    const columns = [{
      title: '工号',
      dataIndex: 'jobNumber',
    }, {
      title: '登录名',
      dataIndex: 'loginName',
    }, {
      title: '真实姓名',
      dataIndex: 'realName',
    }, {
      title: '职位',
      dataIndex: 'positionName',
    }, {
      title: '手机号',
      dataIndex: 'mobile',
    }, {
      title: '用户角色',
      dataIndex: 'roleList'
    }, {
      title: '部门',
      dataIndex: 'groupList',
    }];
    return (
      <div className={`${this.state.isShow ? '' : 'none'} ${styled.task}`}>
        <div style={{'marginBottom': '30px'}}>
          <Button onClick={() => {
            this.showModal();
          }}>新增人员</Button>
          <Button
            style={{'marginLeft': '15px'}}
            onClick={this.delDeviceData}
          >删除</Button>
        </div>
        <Table
          columns={columns}
          dataSource={this.state.ans}
          rowSelection={ rowSelection }
        />
        <div style={{'margin': '30px 0 50px 100px'}}>
          <Button type="primary" onClick={() => {
            if(this.state.ans.length === 0) {
              message.warning('请选择人员后操作');
              return;
            }
            let targetList = [];
            this.state.ans.forEach(item => {
              targetList.push(item.key);
            });
            this.props.isOkNext(targetList);
          }}>下一步</Button>
          <Button style={{ marginLeft: '5%' }} onClick={() => {
            this.props.goBack(1);
          }} className="back">返回</Button>
        </div>
        <Modal
          title="人员列表"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width={1000}
          okText="确认"
          cancelText="取消"
        >
          <PersonList
            selectedDevice={this.selectedDevice}
            isSearchData={this.isSearchData}
            deviceSelectedData={this.state.deviceSelectedData}
            isSearchReset={this.state.isSearchReset}
          />
        </Modal>
      </div>
    );
  }
}

export default FormList03;

